<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form ref="form"
                 :model="form">
          <!-- 顶部搜索 -->
          <el-col :span="3"
                  class="top-search">
            <el-form-item>
              <el-input v-model.trim="searchValue"
                        placeholder="根据用户名搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3"
                  class="top-button">
            <el-button @click="clean">清除</el-button>
            <el-button type="primary"
                       @click="search">搜索</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="success"
                       class="top-addButton"
                       icon="el-icon-edit"
                       @click="openAdd">新增标签</el-button>
          </el-col>
        </el-form>
        <!-- 警告栏 -->
        <!-- ${articleInfo.listSum} -->
        <el-alert :title="`数据一共${topList}条`"
                  type="info"
                  :closable="false"
                  show-icon>
        </el-alert>
        <!-- 列表 -->
        <permissions-list @changeTopList='changeTopList'
                          ref="passTitle"
                          @passPerDetail='passPerDetail'
                          @updataListAdd='openAddPer'
                          :title="searchValue"></permissions-list>
        <!-- 新增 -->
        <el-dialog :visible.sync="addIsShow"
                   :title="isstate=='add' ? '新增权限项':'修改权限项'">
          <permissions-add @close='closeCard'
                           v-if="addIsShow"
                           :keyId='keyId'
                           :isstate='isstate'
                           :detailList='detailList'
                           @resetKeyId='resetKeyId'
                           @updataList="updataList"
                           ref="cleaninput"></permissions-add>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top-search {
  padding-right: 10px;
}
.top-addButton {
  position: absolute;
  right: 50px;
}
</style>

<script>
import PermissionsAdd from '../components/permissions-add.vue'
import permissionsList from '../components/permissions-list.vue'
export default {
  components: { permissionsList, PermissionsAdd },
  name: 'base-permissions',
  data() {
    return {
      isstate: '',
      form: {},
      searchValue: null,
      state: '',
      topList: '',
      addIsShow: false,
      keyId: {},
      detailList: []
    }
  },
  methods: {
    //   更新警告条数
    changeTopList(val) {
      this.topList = val.length
      this.addList = val
    },
    // 搜索
    search() {
      this.$refs.passTitle.getList()
    },
    // 清空
    clean() {
      this.searchValue = null
      this.$nextTick(() => {
        this.$refs.passTitle.getList()
      })
    },
    updataList() {
      this.$refs.passTitle.getList()
    },
    closeCard() {
      this.addIsShow = false
      this.detailList.data.permissions = []
      this.$refs.cleaninput.cleanPerAdd()
    },
    openAddPer(val) {
      this.addIsShow = true
      //   console.log(val)
      console.log(this.keyId.create_date)
      this.keyId = val
      this.isstate = 'edit'
      //   console.log(this.key)
    },
    // 重置keyId
    resetKeyId() {
      this.keyId = {}
    },
    passPerDetail(val) {
      this.detailList = val
      //   console.log(val)
      //   console.log(this.detailList)
    },
    // 新增按钮
    openAdd() {
      this.addIsShow = true
      this.isstate = 'add'
    }
  }
}
</script>
